<section aria-label="Filters">
  <div class="filter-bar-confirm" ng-show="newFilters.length">
    <form ng-submit="applyFilters(newFilters)">
    <ul class="list-unstyled">
      <li>Apply these filters?</li>
      <li ng-repeat="filter in newFilters track by $index" class="filter" ng-click="filter.meta.apply = !filter.meta.apply"><input type="checkbox" ng-checked="filter.meta.apply"/> {{ filter.meta.key }}: {{ filter.meta.value }}</li>
      <li ng-if="changeTimeFilter" class="changeTimeFilter filter" ng-click="changeTimeFilter.meta.apply = !changeTimeFilter.meta.apply"><input type="checkbox" ng-checked="changeTimeFilter.meta.apply"/> <strong>Change time to:</strong> {{changeTimeFilter.meta.value}} </li>
      <li>
        <div class="kuiButtonGroup">
          <button class="kuiButton kuiButton--primary kuiButton--small">
            Apply Now
          </button>

          <button
            class="kuiButton kuiButton--hollow"
            ng-click="clearFilterBar();"
          >
            Cancel
          </button>
        </div>
      </li>
    </ul>
    </form>
  </div>

  <div
    class="filter-bar"
    ng-show="filters.length || showAddFilterButton()"
  >
    <filter-pill
      ng-repeat="filter in filters track by $index"
      filter="filter"
      on-toggle-filter="toggleFilter"
      on-pin-filter="pinFilter"
      on-invert-filter="invertFilter"
      on-delete-filter="deleteFilter"
      on-edit-filter="editFilter"
    ></filter-pill>

    <div
      class="filter-link"
      ng-show="showAddFilterButton()"
    >
      <div class="filter-description small">
        <a
          ng-click="addFilter()"
          kbn-accessible-click
          data-test-subj="addFilter"
        >
          Add a filter
          <span class="fa fa-plus"></span>
        </a>
      </div>
    </div>

    <div
      class="filter-link pull-right"
      ng-show="filters.length"
    >
      <div class="filter-description small">
        <a
          ng-click="showFilterActions = !showFilterActions"
          kbn-accessible-click
          aria-expanded="{{!!showFilterActions}}"
          aria-controls="filterActionsAllContainer"
        >
          Actions
          <span
            class="fa"
            ng-class="{
              'fa-caret-down': showFilterActions,
              'fa-caret-right': !showFilterActions
            }"
            data-test-subj="showFilterActions"
          ></span>
        </a>
      </div>
    </div>

    <div
      class="filter-edit-container"
      ng-if="editingFilter"
    >
      <filter-editor
        filter="editingFilter"
        index-patterns="indexPatterns"
        on-delete="deleteFilter(editingFilter)"
        on-save="saveEdit(filter, newFilter, isPinned)"
        on-cancel="cancelEdit()"
      ></filter-editor>
    </div>
  </div>

  <div
    class="filter-bar filter-bar-condensed"
    ng-show="filters.length && showFilterActions"
    id="filterActionsAllContainer"
  >
    <div class="filter-actions-all">
      <div class="filter-link">
        <div class="filter-description"><strong>All filters:</strong></div>
      </div>
        <div class="filter-link">
          <div class="filter-description"><a ng-click="toggleAll(false)" kbn-accessible-click>Enable</a></div>
        </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="toggleAll(true)" kbn-accessible-click>Disable</a></div>
      </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="pinAll(true)" kbn-accessible-click>Pin</a></div>
      </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="pinAll(false)" kbn-accessible-click>Unpin</a></div>
      </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="invertAll()" kbn-accessible-click>Invert</a></div>
      </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="toggleAll()" kbn-accessible-click>Toggle</a></div>
      </div>
      <div class="filter-link">
        <div class="filter-description"><a ng-click="removeAll()" data-test-subj="removeAllFilters" kbn-accessible-click>Remove</a></div>
      </div>
    </div>
  </div>
</section>
